/**
 * 图表渲染器
 * 根据图表类型选择对应的图表组件进行渲染
 */

import React from 'react';
import { ChartType, ChartData, ChartOptions, LineChartCustomOptions, SteppedLineChartCustomOptions } from '../types';
import ColumnChart from './ColumnChart';
import BarChart from './BarChart';
import LineChart from './LineChart';
import SteppedLineChart from './SteppedLineChart';
import WaterfallChart from './WaterfallChart';
import PieChart from './PieChart';
import DoughnutChart from './DoughnutChart';
import RadarChart from './RadarChart';
import MixedChart from './MixedChart';
import VerticalComparisonChart from './VerticalComparisonChart';

interface ChartRendererProps {
  type: ChartType;
  data: ChartData;
  options?: ChartOptions;
  height?: number;
  // 针对不同图表类型的定制化配置
  customOptions?: LineChartCustomOptions | SteppedLineChartCustomOptions | Record<string, any>;
}

const ChartRenderer: React.FC<ChartRendererProps> = ({
  type,
  data,
  options,
  height = 400,
  customOptions,
}) => {
  switch (type) {
    case 'column':
      return <ColumnChart data={data} options={options} height={height} />;
    
    case 'bar':
      return <BarChart data={data} options={options} height={height} />;
    
    case 'line':
      return <LineChart data={data} options={options} height={height} customOptions={customOptions as LineChartCustomOptions} />;
    
    case 'mixed':
      return <MixedChart data={data as any} options={options} height={height} />;
    
    case 'vertical-compare':
      return <VerticalComparisonChart data={data as any} options={options} height={height} />;
    
    case 'stepped-line':
      return <SteppedLineChart data={data} options={options} height={height} customOptions={customOptions as SteppedLineChartCustomOptions} />;
    
    case 'waterfall':
      return <WaterfallChart data={data} options={options} height={height} />;
    
    case 'pie':
      return <PieChart data={data} options={options} height={height} />;
    
    case 'doughnut':
      return <DoughnutChart data={data} options={options} height={height} />;
    
    case 'radar':
      return <RadarChart data={data} options={options} height={height} />;
    
    default:
      // 默认使用柱状图
      return <ColumnChart data={data} options={options} height={height} />;
  }
};

export default ChartRenderer;

